マテリアルデザインに魂を売った男の末路 基本編1
一回生にマテリアルデザイン布教したい（切実）
参考
多分上二つ見た方が早い（確信）
だがアウトプットも兼ねてやる。
マテリアルデザインとは
Googleが提唱しているデザイン手法である。
2014年に発表され、「同じ企業が提供するサービス間において、デバイス問わずUIや操作方法に一貫性がないとユーザーが混乱する」ことから社内向けに作られたことがきっかけである。そのためGoogleの提供するサービスはほぼ全てマテリアルデザインである。
原則がかなり細かい。
マテリアルデザインが目指すもの
新しいデザインと今までのデザインの原則を合わせ、言語での説明が不要な外観を作る。（Buttonと書かなくてもボタンとわかる）
どのデバイス、プラットフォームであっても、同じ見た目、同じ表現を実現する。
革新とブランド表現のためのカスタマイズを可能にする。
UIライブラリ利用者の注意
上記のマテリアルデザインが目指すものはどちらかといえばUIライブラリの開発者やマテリアルデザインを自前で実装する開発者が注意することでしょう。
しかし、現在では様々なマテリアルデザインのUIライブラリが出ています。
などメジャーなものでもこれほど存在します。
特に最後のMaterialComponentsの開発元はGoogleなのもあって４つの開発プラットフォームに対応しています。
これだけライブラリが存在すればほとんどの開発者はUIライブラリを使うでしょう。
私をその一人でMaterial-UIとMaterializeを使用したことがあります。
では、ライブラリを使えばルールなど知らなくて良いと思っていませんか？
Bad!! それは間違いだ...
マテリアルデザインが目指すものの３つ目にあるカスタマイズ性が曲者なのです。
ほとんどのライブラリにはボタンなどの色が変えられるTheme機能が存在しますし、カスタマイズ機能がなくてもその気になれば強引に書き換えられてしまいます。
マテリアルデザインの原則はあとで詳しく説明しますが、マテリアルデザインでは使用するカラーパレットにもルールが存在します。
それを理解しないまま、カスタマイズした結果、品のないデザインが出来上がってしまうことがあります。
色だけでなく、UIパーツの配置などUIライブラリがあるにせよ最後にはUIライブラリ利用者の技量が問われるのです。
マテリアルデザインに限らず、デザイン手法や設計(MVCやFluxなど)を実装するときはライブラリやフレームワークがあるからと慢心せず、原則やアーキテクトを勉強すると良いでしょう。
もっとも知らないと使えないライブラリの方が多いのですが正しい使い方をしていないと思わぬバグや脆弱性を生む可能性がありますし、詰めの甘いコードはあまり書かない方がいいですよね。
マテリアルデザインの根本的な原則
現実の物理法則を取り込む
http://fladdict.net/blog/wp-content/uploads/2015/05/whatismaterial_properties_physical5-640x640.png
影を用いて「物体の重なり」を表現する。
この原則は「マテリアルデザイン」の所以でもある非常に重要なものです。
影に関してもただ影がついていれば良いのではなく、どの方向から光が当たってできた影かも考慮する必要があります。
上の画像が良い例でしょう。
印刷物向けデザインの基本要素を取り込む
マテリアルデザインは文字や画像、余白などは印刷物向けのデザインを参考にしています。
これによりUIの階層構造や重要なポイントを示しやすくします。
モーション（アニメーション）で反応する
https://liginc.co.jp/wp-content/uploads/2015/08/bloggif_55dda611ca90e.gif
ユーザが行った操作に対し直感的でシンプルなアニメーションで反応する。
連続性のある動きでユーザの注意を引きつける。
個人的にはこれが大好きで何度もボタンなどを押したくなってしまう（笑）
柔軟な基礎
ブランド表現が可能なように設計されている
クロスプラットフォーム
あらゆるプラットフォーム間で同じUIを維持する。
↓こっから真面目奴
レイアウトや色などの基本要素
Surfaces（サーフェス）
マテリアルデザインはサーフェス、深さ、影の使用に反映される３次元の品質を備える。
サーフェスとは、面、表面、平面、水面、地表面、外見、上辺、(水面に)浮上する、表面化する、明るみに出る、平らにする、面をつける、などの意味を持つ英単語。
1. マテリアルを取り巻く環境
物理的な法則
物理的な世界では、オブジェクトは積み重ねられたり、互いに結合されたりすることはありますが、互いに通過することはできません。彼らは影を投げ込み、光を反射します。
マテリアルデザインは、サーフェスがどのように表示され、マテリアルUI全体を移動するかというこれらの品質を反映します。サーフェスと3次元での移動方法は、物理的な世界でどのように動くかに似ています。
深さ
マテリアルデザインUIは、光、サーフェス、キャストシャドウを使用して3次元（3D）スペースを表現する環境に表示されます。マテリアル環境のすべての要素は、水平方向、垂直方向、およびz軸に沿ったさまざまな深度に移動します。深さは、観察者に向かって延びる正のz軸に沿った様々な点に要素を配置することによって描かれます。
https://material.io/design/assets/0B8v7jImPsDi-ZUJfcjFIdEVNN28/whatismaterial-environment-3d.png
2. 特性
サーフェスは、マテリアルデザイン全体で一貫性のある変更不可能な特性と動作を持っています。
サイズ
サーフェスの厚さ常に1dpの厚さである。
ただし高さ（Y軸）と幅（X軸）は変わることがある。
https://material.io/design/assets/0B8v7jImPsDi-eEJlcFFMUzJXSlE/whatismaterial-materialproperties-physicalproperties-thickness-01-yes.png
影
マテリアルデザインは影によってサーフェスの高さを示します。
https://material.io/design/assets/1NulZoBoZiguk5YAo74aNIR-mRGPmxjSV/materialshadow-do.mp4ただ影をつけるのではなく上記の動画の2のように高さの変更も意識する。
解像度
マテリアルはどれだけ拡大しても荒れることはありません。
https://material.io/design/assets/1yMoECU42SGRq8xav2IqcPAmfpm2qYZvA/materialsurfaceproperties-do-infiniteresolution-1a.mp4
コンテンツ
テキストや画像などのコンテンツは任意の形や色でサーフェスに表示します。
コンテンツが如何なる物でもサーフェスに厚さを与えることはありません。
しつこいようですが、サーフェスの厚みは必ず1dpです。
https://material.io/design/assets/1xQcc7grFo-KO3yr2ba9XAmKmKasBNwa6/materialcontent-shapecolor.mp4
https://material.io/design/assets/13W28szpZTf5kSFCGhdt9tZkbpnfbHKS9/materialcontent-behavior.mp4
https://material.io/design/assets/1u7RhQke_8cJNOA392JGJH37FSwzFhD0N/materialcontent-dependent-behavior.mp4
物理的な特性
マテリアルはしっかりしていて、ユーザの入力や操作に対する反応はマテリアルを通過することは出来ません。
https://material.io/design/assets/1bQO9zhMloD3HtBikFXTYxmTLJ_zFRiIV/materialsurfaceproperties-do-physical.png
複数のマテリアル要素は、同時に空間内の同じ点を占めることはできない。
https://material.io/design/assets/0B8v7jImPsDi-OWpqdE16bkt5LWc/whatismaterial-properties-physical6.png
他のマテリアルを通過することはできません。たとえば、Z軸を変更すると、1つのマテリアルサーフェスは別のマテリアルサーフェスを通過することが出来ません。
https://material.io/design/assets/1ZFe2hECnZAtL0ZdtClzphYkGVT09jLO-/materialproperties-clipping.mp4
マテリアルはガスのようには振る舞いません。
https://material.io/design/assets/1V529DS-aIYyk4bahjNKxT0CqmJLdkMUz/materialsurfaceproperties-dont-gas-1b.mp4
マテリアル本体は液体やゲルではないが、その特性をもつコンテンツを表示することがある
https://material.io/design/assets/1WCcYH2Afmk_tZ18_s5HjZSv61B3MnQNb/materialsurfaceproperties-dont-dripping.mp4
https://material.io/design/assets/1hafXq2mG3HHr1MUK1g6fg7QR9IQTC9dV/materialsurfaceproperties-dont-flow-1a.mp4
マテリアルの変形
マテリアルはその形状と透明度を変化させることができます。
https://material.io/design/assets/15bSEWCZEjq6MddA362QGci7Q4AOkOQs-/materialsurfaceproperties-changeshape-1b.mp4
https://material.io/design/assets/0B6xUSjjSulxccFg0NEpVT0VYRkE/materialsurfaceproperties-opacity.png
マテリアルはその平面に沿ってのみ伸ばしたり縮んだりさせることができます。
https://material.io/design/assets/13eGrsIXeBzDU7l_RFcHotsN8rpWd7kYQ/materialsurfaceproperties-plane.mp4
マテリアルは曲がったり折れたりすることはありません。
https://material.io/design/assets/14aWvPjmL-sdwhT2gelqx3j5hQE7eR5KJ/materialsurfaceproperties-plane-dont.mp4
マテリアルサーフェスは一緒に結合して
https://material.io/design/assets/19__QV-l261owIymJUFARLcV_uyBgwPDj/materialproperties-join.mp4
マテリアルサーフェスは分割したり、その後再結合させることができます。
https://material.io/design/assets/1SGXfwV9XdAXFaR49X7ZpNbj2tsH55ZrK/materialproperties-slicejoin.mp4
マテリアルの動き]
マテリアルは適切な環境内であれば、どこでも自発的に生成または消去することができます。
マテリアルは任意の軸に沿って移動することができる。
https://material.io/design/assets/192Oe3mMnPtaY3S4AlkQWMRoqtIN6zz4w/materialmovement-anyaxis.mp4
マテリアルサーフェスはモーションの速度を調整することができます。
https://material.io/design/assets/1HRNO73Jkgoz48OuYa2JgTQdOma1jggjQ/materialmovement-coordinate.mp4
Z軸に沿ったマテリアルのモーションは、通常はユーザの操作による結果にのみ使用します。
https://material.io/design/assets/11Gpm653O4qC39MSQAyv9sWn16Bm6f4h6/materialmovement-z-interaction.mp4
以上が7つがマテリアルの特性です。
長いので分割します。